<div class="row">
  <div class="col-md-6">
    <carousel [interval]="myInterval" [noWrap]="noWrapSlides">
      <slide *ngFor="let slidez of slides; let index=index"
             [active]="slidez.active">
        <img [src]="slidez.image" style="margin:auto;">

        <div class="carousel-caption">
          <h4>Slide {{index}}</h4>

          <p>{{slidez.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>

  <div class="col-md-6">
    <button type="button" class="btn btn-info"
            (click)="addSlide()">Add Slide
    </button>
    <!-- issue: removing currently active slide should not lead to white screen? -->
    <!--<button type="button" class="btn btn-info"-->
            <!--(click)="removeSlide(2)">Remove Slide#3-->
    <!--</button>-->
    <br>

    <div class="checkbox">
      <label>
        <input type="checkbox" [(ngModel)]="noWrapSlides">
        Disable Slide Looping
      </label>
    </div>

    Interval, in milliseconds: <input type="number" class="form-control" [(ngModel)]="myInterval">
    <br/>Enter a negative number or 0 to stop the interval.
  </div>
</div>
